<template>
  <el-card style="margin: 20px 20px 0 20px">
    <el-form label-width="100px">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="申请人姓名">
          <el-input  :value="userInfo.username" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请人电话">
            <el-input  :value="userInfo.phone" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="申请人邮箱">
            <el-input  :value="userInfo.email" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary"
                     style="float: right;width: 100px;"
                     @click="cancel"
          >取消</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="申请人部门">
            <el-input :value="departmentFormatter(userInfo,null,userInfo.department)"  disabled/>
          </el-form-item>
        </el-col>
       <el-col :span="6">
         <el-form-item label="申请类型">
           <el-select v-model="selectedOption" placeholder="请选择申请类型" style="width: 100%;">
             <el-option
                 v-for="option in options"
                 :key="option.value"
                 :label="option.label"
                 :value="option.value">
             </el-option>
           </el-select>
         </el-form-item>
       </el-col>
      </el-row>
    </el-form>
  </el-card>
  <component :is="currentComponent"/>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import ScrapView from "@/views/application/require/ScrapView.vue";
import RepairView from "@/views/application/require/RepairView.vue";
import BusRequireView from "@/views/application/require/BusRequireView.vue";
import RoomRequireView from "@/views/application/require/RoomRequireView.vue";
import PurchaseView from "@/views/application/require/PurchaseView.vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";

const options = [
  {label: '报废申请', value: 0},
  {label: '维修申请', value: 1},
  {label: '校车申请', value: 2},
  {label: '教室申请', value: 3},
  {label: '采购申请', value: 4}
];

const selectedOption = ref(0);

const componentMap = {
  0: ScrapView,
  1: RepairView,
  2: BusRequireView,
  3: RoomRequireView,
  4: PurchaseView
};


const currentComponent = computed(() => componentMap[selectedOption.value] || null);

const cancel = () => {
  router.push('/applicationList')
}

let userInfo = getUser();
const departmentList = ref([]);
onMounted(() => {
  loadDictOptions(departmentList, 'department')
});
const departmentFormatter = (row, column, cellValue, index) => {
  if (!departmentList.value) {
    return cellValue;
  }
  for (let item of departmentList.value) {
    if (item.value === cellValue) {
      cellValue = item.label;
    }
  }
  return cellValue;
};


</script>

<style scoped>
/* 可以在这里添加特定的样式 */
</style>